<script setup>
  import {ref} from 'vue';
  import { useRouter, useRoute } from 'vue-router'
  import {ElMessage} from "element-plus";
  import { useAuthStore } from '@/stores/auth'
  const router = useRouter()
  const route = useRoute()
  const auth = useAuthStore()

  // 表单状态：login / register
  const formMode = ref('login'); // 'login' 或 'register'

  // 登录表单数据
  const loginData = ref({
    username: '',
    password: ''
  });

  // 注册表单数据
  const registerData = ref({
    username: '',
    password: '',
    confirmPassword: ''
  });

  // 错误提示信息
  const errorMessage = ref('');

  // 切换表单模式
  const toggleForm = (mode) => {
    formMode.value = mode;
    errorMessage.value = '';
  };

  // 登录提交逻辑
  const handleLoginSubmit = async () => {
    if (!loginData.value.username || !loginData.value.password) {
      errorMessage.value = '用户名和密码不能为空';
      ElMessage.error('用户名和密码不能为空');
      return;
    }
    try {
      await auth.login(loginData.value.username, loginData.value.password)
      ElMessage.success('登录成功')
      const redirect = route.query.redirect || '/home'
      router.replace(redirect)
    } catch (e) {
      ElMessage.error(auth.error || '登录失败')
    }
  };

  // 注册提交逻辑
  const handleRegisterSubmit = async () => {
    const { username, password, confirmPassword } = registerData.value;
    if (!username || !password || !confirmPassword) {
      errorMessage.value = '所有字段都必须填写';
      ElMessage.error('所有字段都必须填写');
      return;
    }
    if (password !== confirmPassword) {
      errorMessage.value = '两次输入的密码不一致';
      ElMessage.warning('两次输入的密码不一致');
      return;
    }
    try {
      await auth.register(username, password)
      ElMessage.success('注册成功，请登录')
      toggleForm('login')
      loginData.value.username = username
    } catch (e) {
      ElMessage.error(auth.error || '注册失败')
    }
  };

</script>

<template>
  <!-- 未登录状态 -->
  <div id="auth-container">
    <nav class="navbar">
      <div class="brand">三江译舟
        <span class="small-text">ꓠ ꓫꓹ ꓕꓳꓽ ꓶꓽ ꓡꓲ ꓢꓴ ꓥꓳꓽ ꓧꓶꓽ ꓥꓳꓽ ꓒꓳꓹ ꓔꓶꓸ</span>
      </div>
    </nav>
    <!-- 登录表单 -->
    <div class="container">
      <div class="card auth-form" id="login-form"  v-show="formMode === 'login'">
        <h2>用户登录</h2>
        <span class="small-text">ꓣꓱꓽ ꓢꓴ ꓓꓴꓽ ꓬꓲ ꓔꓶꓸ</span>
<form id="loginForm" @submit.prevent="handleLoginSubmit">
  <div class="form-group">
    <label class="form-label">用户名</label>
    <input type="text" class="form-input" v-model="loginData.username" required>
  </div>
  <div class="form-group">
    <label class="form-label">密码</label>
    <input type="password" class="form-input" v-model="loginData.password" required>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

        <span class="small-text">ꓓꓳꓽ ꓬꓲ</span>
        <p class="switch-form">
          没有账号？<a href="#" @click="toggleForm('register')">立即注册</a>
        </p>
        <span class="small-text">ꓬꓲꓸ ꓦꓹ ꓟꓽ ꓙꓳꓽ ꓐꓯ ꓬꓲꓸ ꓫꓵ ꓕꓲꓽ ꓟ ꓫꓹ ꓠꓬ ꓕꓲ ꓗꓪ ꓠꓬꓲꓸ</span>
      </div>
      <!-- 注册表单 -->
      <div class="card auth-form" id="register-form" style="display: none;" v-show=" formMode === 'register'">
        <h2>用户注册</h2>
        <span class="small-text">ꓣꓱꓽ ꓢꓴ ꓦꓹ ꓫꓹ ꓖꓴꓸ</span>
        <form @submit.prevent="handleRegisterSubmit">
          <div class="form-group">
            <label class="form-label">用户名</label>
            <span class="small-text">ꓣꓱꓽ ꓢꓴ ꓟꓲ</span>
            <input type="text" class="form-input"  v-model="registerData.username" required>
          </div>
          <div class="form-group">
            <label class="form-label">密码</label>
            <span class="small-text">ꓣꓱꓽ ꓢꓴ ꓓꓳꓽ ꓬꓲ ꓓꓳ ꓬꓲ ꓓꓴ ꓟꓲꓹ ꓟꓻ</span>
            <input type="password" class="form-input" v-model="registerData.password" required>
          </div>
          <div class="form-group">
            <label class="form-label">确认密码</label>
            <span class="small-text">ꓣꓱꓽ ꓢꓴ ꓓꓳꓽ ꓬꓲ ꓓꓳ ꓬꓲ ꓓꓴ ꓟꓲꓹ ꓟꓻ ꓮ ꓟꓶ ꓕꓲꓽ ꓧꓪꓹ ꓑꓳꓻ</span>
            <input type="password" class="form-input"  v-model="registerData.confirmPassword" required>
          </div>
          <button type="submit" class="btn btn-primary">注册</button>
        </form>
        <span class="small-text">ꓕꓲ ꓗꓪ ꓠꓬꓲꓸ ꓢꓶꓸ ꓫ</span>
        <p class="switch-form">
          已有账号？<a href="#" @click="toggleForm('login')">立即登录</a>
        </p>
        <span class="small-text">ꓬꓲꓸ ꓦꓹ ꓙꓳꓽ ꓖꓴ ꓐꓯ ꓠꓬ ꓕꓲ ꓗꓪ ꓠꓬꓲꓸ ꓢꓲꓸ ꓓꓳꓽ ꓬꓲꓸ</span>
      </div>
    </div>
  </div>
</template>

<style >
  @import '@/assets/base.css';
</style>
